<template>
  <el-select class="selectClass" :style="selectStyle" v-model="selectValue" placeholder="请选择">
    <el-option v-for="(item, i) in options" :key="i" :label="item.label" :value="item.value" />
  </el-select>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'
import { computed } from 'vue'
import type { OptionItem } from './type'

const props = defineProps({
  width: {
    type: String,
    default: '218px'
  },
  value: {
    type: [Array, Number, String] as PropType<string[] | number | string>,
    default: () => []
  },
  options: {
    type: Array as PropType<OptionItem[]>,
    default: () => []
  } // 是一个数组，数组中是label、value的形式
})

const emits = defineEmits(['update:value'])
const selectValue = computed({
  get: () => props.value,
  set: (val) => {
    emits('update:value', val)
  }
})

const selectStyle = computed(() => `width: ${props.width}!important;`)
</script>

<style lang="scss" scoped>
.el-select__tags-text {
  display: inline-block;
  max-width: 70px; // 设置这个是防止下拉框中内容过长时，撑破下拉框
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:deep(.el-select-v2__placeholder) {
  // color: #a8abb2;
  text-align: left;
}
</style>
